<template>
    <div data-tauri-drag-region class="sidebar">
        <div class="user-info">
            <el-avatar :size="35" :src="circleUrl" />
            <div v-if="!sidebar.collapse" class="account-name">
                <el-tooltip
                    class="box-item"
                    effect="light"
                    :content="username"
                    placement="bottom">
                    <span>{{username}}</span>
                </el-tooltip>
            </div>
        </div>
        <el-divider />
        <div data-tauri-drag-region class="menu-bar">
            <el-menu
                class="sidebar-el-menu"
                data-tauri-drag-region
                :default-active="onRoutes"
                :collapse="sidebar.collapse"
                :background-color="sidebar.bgColor"
                :text-color="sidebar.textColor"
                router
            >
                <template v-for="item in menuData">
                    <template v-if="item.children">
                        <el-sub-menu :index="item.index" :key="item.index" v-permiss="item.id">
                            <template #title>
                                <el-icon class="side-icon">
                                    <component :is="item.icon"></component>
                                </el-icon>
                                <span>{{ item.title }}</span>
                            </template>
                            <template v-for="subItem in item.children">
                                <el-sub-menu
                                    v-if="subItem.children"
                                    :index="subItem.index"
                                    :key="subItem.index"
                                    v-permiss="item.id"
                                >
                                    <template #title>{{ subItem.title }}</template>
                                    <el-menu-item
                                        v-for="(threeItem, i) in subItem.children"
                                        :key="i"
                                        :index="threeItem.index"
                                    >
                                        {{ threeItem.title }}
                                    </el-menu-item>
                                </el-sub-menu>
                                <el-menu-item v-else :index="subItem.index" v-permiss="item.id">
                                    {{ subItem.title }}
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.index" :key="item.index" v-permiss="item.id">
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <template #title>{{ item.title }}</template>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </div>
        <el-divider />
        <div class="sidebar-collapse-btn">
            <el-dropdown class="user-name" trigger="click" @command="settingItem">
                <span class="el-dropdown-link">
                    <el-icon><Setting /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
                            <el-dropdown-item>项目仓库</el-dropdown-item>
                        </a>
                        <a href="https://lin-xin.gitee.io/example/vuems-doc/" target="_blank">
                            <el-dropdown-item>官方文档</el-dropdown-item>
                        </a> -->
                        <el-dropdown-item command="user">个人中心</el-dropdown-item>
                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <div  @click="collapseChage">
                <el-icon v-if="sidebar.collapse">
                    <Expand />
                </el-icon>
                <el-icon v-else>
                    <Fold />
                </el-icon>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSidebarStore } from '../store/sidebar';
import { useRoute, useRouter } from 'vue-router';
import { menuData } from '@/components/menu';
import circleUrl from '../assets/img/img.jpg';

const route = useRoute();
const router = useRouter();
const onRoutes = computed(() => {
    return route.path;
});
// const username: string | null = localStorage.getItem('vuems_name');
const username: string | null = sessionStorage.getItem('doctor') ? JSON.parse(sessionStorage.getItem('doctor')).name : '';
const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
    sidebar.handleCollapse();
};
const settingItem = (command: string) => {
     if (command == 'loginout') {
        localStorage.removeItem('vuems_name');
        router.push('/login');
    } else if (command == 'user') {
        router.push('/ucenter');
    }
}
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0;
    overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
    width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
    width: var(--sidebar-width-default);
}

.sidebar-el-menu {
    min-height: 100%;
}

.menu-bar {
    height: calc(100% - 165px);
    overflow: scroll;
    overflow-x: hidden;
}

.sidebar :deep(.el-menu) {
    background-color: var(--sidebar-bg-color);
}
.sidebar :deep(.el-sub-menu__title) {
    color: var(--menu-text-color);
    font-size: var(--font-size-16);
}
.sidebar :deep(.el-menu-item) {
    color: var(--menu-text-color);
    font-size: var(--font-size-16);
}
.sidebar :deep(.el-menu-item.is-active) {
    color: var(--el-menu-active-color);
}
.sidebar :deep(.el-sub-menu__title:hover) {
    background-color:rgba(45, 140, 240, 0.8);
    color: var(--sidebar-text-color);
}

.sidebar :deep(.el-menu-item:hover) {
    background-color:rgba(45, 140, 240, 0.8);
    color: var(--sidebar-text-color);
}
.sidebar :deep(.sidebar-el-menu) {
    min-height: calc(100% - 165px);
}
.sidebar :deep(.el-divider--horizontal) {
    margin: 15px 0;
}
.sidebar-collapse-btn {
    position: absolute;
    bottom: 0px;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 30px;
}

.user-info {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-left: 10px;
}

.account-name {
    width: 80px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

.side-icon {
    font-size: var(--font-size-20);
}
</style>
<style>
.el-popper .el-menu {
    background-color: var(--sidebar-bg-color);
}
.el-popper .el-menu-item:hover {
    background-color:rgba(45, 140, 240, 0.8);
    color: var(--sidebar-text-color);
}
</style>
